<template>
  <div class="panel-body">
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul class="nav nav-tabs">
          <li>
            <router-link
              class="list-group-item"
              active-class="active"
              to="/home/news"
              >News</router-link
            >
          </li>
          <li>
            <router-link
              class="list-group-item"
              active-class="active"
              to="/home/messages"
              >Message</router-link
            >
          </li>
        </ul>
        <div>
          <!-- 二级路由展示位置 -->
          <!-- 路由切换时，隐藏组件实质是销毁组件，显示组件实质是挂载组件,缓存路由组件让不展示的路由组件保持挂载，不被销毁（DOM 结构会移除，但支撑结构的组件不被销毁）。 -->
          <keep-alive include="Messages">
            <router-view></router-view>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  /* name 的第二个作用，缓存路由中缓存指定路使用 name 标识 */
  name: "Home",
};
</script>

<style></style>
